<template>
	<div class="reference">
		<li class="item" v-for="item in list" :key="item.id">
			<span class="icon-box"><Icon :type="item.type"/></span>
			<span class="text">{{item.text}}</span>
		</li>
		<span class="triangle"><Icon type="arrowUp"/></span>
	</div>
</template>

<script>
export default{
	data(){
		return{
			list: [{
				id: 1,
				text: '专栏投稿',
				type: 'column'
			},{
				id: 2,
				text: '音频投稿',
				type: 'music'
			},{
				id: 3,
				text: '视频投稿',
				type: 'play'
			},{
				id: 4,
				text: '投稿管理',
				type: 'reference'
			}]
		}
	}
}
</script>

<style scoped lang="less">
.reference{
	position: absolute;
	display: flex;
	width: 304px;
	height: 78px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 6px;
	.item{
		width: 76px;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: 0.2s ease;
		cursor: pointer;
		.icon-box{
			color: #757575;
			font-size: 26px;
		}
		.text{
			margin-top: 6px;
			font-size: 16px;
			color: #212121;
		}
	}
	.triangle{
		left: 230px;
	}
}
</style>
